<template>
    <el-container v-loading="loading">
        <div class="container">
            <div v-if="!isMobile" class="breadcrumb">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }"><el-icon><House /></el-icon></el-breadcrumb-item>
                    <el-breadcrumb-item >Download</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="table-container">
                <h1>EcDNA Data</h1>
                <div class="download-container">
                    <el-table
                        :data="ecdnaData"
                        >
                        <el-table-column prop="filename" label="File Name"></el-table-column>
                        <el-table-column prop="filename" label="File Description"/>
                        <el-table-column prop="filesize" label="File Size" />
                        <el-table-column fixed="right" label="Actions" min-width="120">
                            <template #default="scope">
                                <el-button link type="primary" size="small" @click="downloadData(scope.row.filename,  scope.row.filepath)">
                                    <el-icon :size="20"
                                        ><Download />
                                    </el-icon>
                                </el-button>
                            </template>

                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="table-container">
                <h1>Depmap Data</h1>
                <div class="download-container">
                    <el-table
                        :data="depData"
                        >
                        <el-table-column prop="filename" label="File Name"></el-table-column>
                        <el-table-column prop="filename" label="File Description"/>
                        <el-table-column prop="filesize" label="File Size" />
                        <el-table-column fixed="right" label="Actions" min-width="120">
                            <template #default="scope">
                                <el-button link type="primary" size="small" @click="downloadData(scope.row.filename,  scope.row.filepath)">
                                    <el-icon :size="20"
                                        ><Download />
                                    </el-icon>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </el-container>
</template>

<script lang="ts" setup name="Download">
    import { post } from '@/axios/api';
    import { ElMessage } from 'element-plus';
    import { onBeforeMount, onMounted, ref } from 'vue';


    let loading = ref(false);
    let ecdnaData: any = ref([]);
    let depData = ref([]);
    let ecdnaTotal = ref(0)
    let ecdnaCurrentPage = ref(1)
    let ecdnaCurrentPageSize = ref(10)
    let depTotal = ref(0)
    let depCurrentPage = ref(1)
    let depCurrentPageSize = ref(10)
    let isMobile = ref(window.innerWidth <= 768)

    async function handleEcdnaSizeChange(val: number) {
        ecdnaCurrentPageSize.value = val
        getDownloadData(ecdnaCurrentPage.value, val, "ecdna")
    }

    async function handleEcdnaCurrentChange(val: number) {
        ecdnaCurrentPage.value = val
        getDownloadData(val, ecdnaCurrentPageSize.value, "ecdna")
    }

    async function handleDepSizeChange(val: number) {
        depCurrentPageSize.value = val
        getDownloadData(depCurrentPage.value, val, "dep")
    }

    async function handleDepCurrentChange(val: number) {
        depCurrentPage.value = val
        getDownloadData(val, depCurrentPageSize.value, "dep")
    }




    async function getDownloadData(page: number, page_size: number, type:string) {
        let res:any = {}
        loading.value = true
        let data = {
            page,
            page_size,
            type
        }
        try {
            res = await post('/get_download_list/', data)
        } catch (error:any) {
            loading.value = false
            ElMessage({
                message: error,
                type: 'error',
            })
        }
        if (res && res.success) {
            if (type === 'ecdna') {
                ecdnaData.value = res.data
                ecdnaCurrentPage.value = res.page
                ecdnaCurrentPageSize.value = res.page_size
                ecdnaTotal.value = res.total
            } else if (type === 'dep') {
                depData.value = res.data
                depTotal.value = res.total
                depCurrentPage.value = res.page
                depCurrentPageSize.value = res.page_size
            }
            loading.value = false
        } else {
            loading.value = false
            ElMessage({
                message: res.msg ? res.msg : 'An error occured',
                type: 'error',
            })
        }
    }

    async function downloadData(filename:string, filepath:string) {
        loading.value = true
        let data = {
            filename,
            filepath
        }
        let res:any = {}
        try {
            res = await post('/download_data/', data)
        } catch (error:any) {
            loading.value = false
            ElMessage({
                message: error,
                type: 'error',
            })
        }
        if (res) {
            const blob = new Blob([res], { type: 'text/csv;charset=utf-8;' })
            let urlObject = window.URL
            let url = urlObject.createObjectURL(blob)
            let ele = document.createElement("a")
            ele.href = url
            ele.download = filename.trim()
            ele.click()
            urlObject.revokeObjectURL(url)
            loading.value = false
        } else {
            ElMessage({
                message: 'An error occured',
                type: 'error',
            })
        }
    }

    onBeforeMount(() => {
        getDownloadData(ecdnaCurrentPage.value, ecdnaCurrentPageSize.value, "ecdna")
        getDownloadData(depCurrentPage.value, depCurrentPageSize.value, "dep")
    })
</script>

<style scoped>
    a {
        text-decoration: none;
    }

    .container {
        width: 100%;
    }

    .table-container {
        width: 100%;
    }

    .download-container {
        margin: 10px 20px;
        display: flex;
        justify-content: center;
        padding: 4px;
        border-radius: 4px;
        background-color: white;
        padding: 12px;
    }

    .pagination-container {
        margin: 20px 10px;
        display: flex;
        justify-content: center;
    }
</style>